<template>
	<view class="container">
		<view class="content">
			<!-- <view class="rili">
				<u-calendar ref="calendar" :listss="listss" v-if="listss && listss.length" :sts='sts'></u-calendar>
			</view> -->
			<view class="details" v-if="payrollInfo">
				<view class="details-title d-rn d-ac d-jb">
					<text>{{payrollInfo.months}}{{ $t('month')}} {{userInfo.employeeName}}</text>
					<text>{{$t('real_wages')}}： <text>{{payrollInfo.totalMoney}}{{ $t('money') }}</text> </text>
				</view>
				<view class="details-one">
					<view class="details-one-one d-rn d-ac d-jb" v-for="(item,index) in payrollInfo.headerList" :key="index">
						<text>{{item.paramName}}</text>
						<text>{{payrollValue[item.paramKey]}}</text>
					</view>
				</view>
				<!-- <view class="details-one">
					<view class="details-one-one d-rn d-ac d-jb">
						<text>月基本工资</text>
						<text>3000元</text>
					</view>
					<view class="details-one-one d-rn d-ac d-jb">
						<text>出勤天数</text>
						<text>21天</text>
					</view>
					<view class="details-one-one d-rn d-ac d-jb">
						<text>加半天数</text>
						<text>0天</text>
					</view>
				</view> -->
				<!-- <view class="details-two  d-rn d-jb">
					<view class="details-two-left">
						<text>应发工资</text>
					</view>
					<view class="details-two-right d-cn">
						<text>工资:3000元</text>
						<text>加班工资:0元</text>
						<text>绩效工资:2000元</text>
						<text>总计:10000元</text>
					</view>
				</view>
				<view class="details-two d-rn d-jb">
					<view class="details-two-left">
						<text>应扣工资</text>
					</view>
					<view class="details-two-right d-cn">
						<text>请假:0天</text>
						<text>金额:0元</text>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { getPayrollDetail } from "@/api/mine.js"
	export default {
		data() {
			return {
				pageData:{},
				payrollInfo:null,
				payrollValue:{}
				// listss: [{
				// 	month: '1'
				// }, {
				// 	month: '2'
				// }, {
				// 	month: '3'
				// }, {
				// 	month: '4'
				// }, {
				// 	month: '5'
				// }, {
				// 	month: '6'
				// }, {
				// 	month: '7'
				// }, {
				// 	month: '8'
				// }],
				// sts: false,
			}
		},
		onLoad(option) {
			this.pageData = option;
			this.getData()
		},
		methods:{
      getData(){
				getPayrollDetail({
					id:this.pageData.id
				}).then((res)=>{
					this.payrollInfo=res.data
					this.payrollValue = JSON.parse(this.payrollInfo.dataList[0].dataJson)
				})
			}
		}
	}

</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.container{
		width: 100%;
		.content{
			.rili{
				background-color: #ffffff;
			}
			.details{
				background-color: #ffffff;
				&-title{
					padding: 24rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eeeeee;
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
					text:nth-of-type(2){
						text{
							color: #FF0000;
						}
					}
				}
				&-one{
					&-one{
						padding: 24rpx;
						box-sizing: border-box;
						border-bottom: 1px solid #eeeeee;
						font-size: 26rpx;
						text:nth-of-type(1){
							color: #333333;
						}
						text:nth-of-type(2){
							margin-left: 30px;
							color: #999999;
						}
					}
				}
				&-two{
					padding: 24rpx;
					box-sizing: border-box;
					&-left{
						text{
							font-size: 26rpx;
							color: #333333;
						}
					}
					&-right{
						text{
							font-size: 26rpx;
							color: #999999;
							text-align: right;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}
	}

</style>